<template>
  <div>
  <h2>v-model的原理2</h2>
  <!-- <input type="text" :value="uname" @input="onInput"> -->

  <!-- 在template区域，如果使用事件对象，则使用$event -->
  <!-- <input type="text" :value="uname" @input="uname=$event.target.value"> -->
  <!-- 综上所述：对于输入框来说：v-model相当于‘:value+@input’ -->

  <!-- <input type="text" @checked="flag" @change="flag=$event.target.checked"> -->
  <!-- 综上所述：对于单个复选框来说：v-model相当于‘:checked+@change’-->

  <!-- 使用子组件 -->
  <!-- <my-input :value="uname" @inout="(val)=>{uname=val}"></my-input> -->
  
  <my-input v-model="uname"></my-input>
  </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default{
  components:{MyInput},
  data(){
    return{
      uname:'lisisi',
      flag:true
    }
  },
  // mounteds:{
  //   onInput(e){
  //     // console.log(123);
  //     this.uname=e.target.value
  //   }
  // }
}
</script>